<template>
  <div>
    <dialog-subtitle>
      您已经开通提现短信验证<br /> 将发送验证码到您的手机。
    </dialog-subtitle>
    <el-form class="main-container-main__form" :model="form" :rules="rules" ref="form" :disabled="loading"
      @submit.native.prevent="doSave({action: 'saveForm', form: 'form'})" label-position="top">
      <el-form-item class="main-container-main__item" prop="code" :label="`绑定的手机号码：${user.telephone}`"
        :error="formError">
        <el-input class="main-container-main__input" v-model="form.code" placeholder="请输入验证码" auto-complete="off">
          <template slot="prepend">
            <svg-icon icon-class="login-security"></svg-icon>
          </template>
          <template slot="append">
            <el-button @click="sendCode({formItem: 'mobile'})" type="dark" shadow :disabled="sendingCode" size="medium">
              {{codeBtnText}}
            </el-button>
          </template>
        </el-input>
      </el-form-item>
      <el-form-item no-spacing>
        <el-button :block="true" type="primary" native-type="submit" :loading="loading">确定
        </el-button>
      </el-form-item>
    </el-form>
  </div>
</template>

<script>
  import {
    factory,
    form,
    getCode
  } from '@/build';

  import {
    getValidateCode as codeApi
  } from "@/services/api/user";
  import {
    submitWithdraw
  } from '@/services/api/finance';

  export default {
    name: "withdraw-validate",

    mixins: [getCode, form, factory],

    inject: ['setDialogHeader'],
    props: ['withdrawData'],

    data() {
      return {
        form: {
          ...this.withdrawData,
          ...{
            code: undefined,
            // userId: this.user.id
            type: consts.CODE_CASH,
            mobile: '1'
          }
        },
        codeApi,
        formError: '',
        rules: {
          code: {
            required: true,
            message: '验证码不能为空！'
          }
        }
      };
    },

    computed: {
      ...mapState({
        user: state => state.user,
      }),
    },
    methods: {},

    created() {
      this.setDialogHeader('提现验证码');
    },

    mounted() {
      this.bindSave(submitWithdraw, 'saveForm', 'form', {
        beforeSend: (data) => {

          this.formError = '';
          return data;
        },
        successMessage: '提现请求成功',
        errorMessage: '提现请求失败.',
        afterSuccess: ([result, data]) => {
          if (result) {
            this.$emit('on-success', data);
          }
        },
        afterFail: ([result, data]) => {
          this.formError = data.message;
        }
      });
    }
  };
</script>

<style lang="scss" scoped>

</style>